<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="../../common/css/common.css">
		<link rel="stylesheet" href="../../common/css/public.css">
		<link rel="stylesheet" href="http://at.alicdn.com/t/font_1321977_x2a9e6a8ej.css">
		<style>
			.sidebar-menu,
			.treeview-menu {
				background-color: rgb(84, 92, 100);
			}
			
			.tree-view {
				height: 60px;
				line-height: 60px;
				color: #fff;
				float: left;
				padding: 0 20px;
				position: relative;
			}
			
			.tree-view a {
				display: block;
			}
			.tree-view:hover {
				background-color: rgb(67, 74, 80);
			}
			
			.clearfix:after {
				/*伪元素是行内元素 正常浏览器清除浮动方法*/
				content: "";
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			
			.clearfix {
				zoom: 1;
				/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
			}
			
			.icon {
				display: inline-block;
				transform: rotate(180deg);
				float: right;
			}
			
			.treeview-menu {
				position: absolute;
				top: 60px;
				left: 0;
				z-index: -1;
			}			
			.subTreeView {
				min-width: 120px;
			}
			.three{
				left: 160px;
				top: 0px;
			}
		</style>
	</head>

	<body>
		<div class="main-sidebar">
			<div class="sidebar">
				<ul class="sidebar-menu clearfix">
					<li class="tree-view bomLine one">
						<a href="javascript:void(0)">
							<span>订单管理</span>
						</a>
					</li>
					<li class="tree-view one">
						<a href="javascript:void(0)">
							<span>处理中心</span>
							<i class="icon iconfont icon-jiantou-copy-copy-copy"></i>
						</a>
						<ul class="treeview-menu dn">
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
								</a>
							</li>
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
								</a>
							</li>
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
								</a>
							</li>
						</ul>
					</li>
					<li class="tree-view one">
						<a href="javascript:void(0)">
							<span>我的工作台</span>
						</a>
					</li>
					<li class="tree-view one">
						<a href="javascript:void(0)">
							<span>工作场景</span>
						</a>
					</li>
					<li class="tree-view one">
						<a href="javascript:void(0)">
							<span>通知公告</span>
							<i class="icon iconfont icon-jiantou-copy-copy-copy"></i>
						</a>
						<ul class="treeview-menu dn">
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
									<i class="icon iconfont icon-jiantou-copy-copy-copy"></i>
								</a>
								<ul class="treeview-menu dn three">
									<li class="tree-view subTreeView">
										<a href="javascript:void(0)">
											<span>三级</span>
										</a>

									</li>
									<li class="tree-view subTreeView">
										<a href="javascript:void(0)">
											<span>三级</span>
										</a>
									</li>
									<li class="tree-view subTreeView">
										<a href="javascript:void(0)">
											<span>三级</span>
										</a>
									</li>
									<li class="tree-view subTreeView">
										<a href="javascript:void(0)">
											<span>三级</span>
										</a>
									</li>
									<li class="tree-view subTreeView">
										<a href="javascript:void(0)">
											<span>三级</span>
										</a>
									</li>
								</ul>
							</li>
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
								</a>
							</li>
							<li class="tree-view subTreeView">
								<a href="javascript:void(0)">
									<span>二级</span>
								</a>
							</li>
						</ul>
					</li>
				</ul>
			</div>
		</div>
		<script src="../../common/js/jquery.min.js"></script>
		<script src="../../common/js/components.js"></script>
		
	</body>

</html>